<template>
  <div class="simple-qr-scanner">
    <!-- 模拟扫描界面 -->
    <div v-if="isScanning" class="scanner-overlay">
      <div class="scanner-header">
        <van-button 
          type="default" 
          icon="cross" 
          @click="stopScan"
          class="close-btn"
        >
          关闭
        </van-button>
        <h3>模拟扫描模式</h3>
      </div>
      
      <div class="scanner-content">
        <div class="scanner-frame">
          <div class="corner top-left"></div>
          <div class="corner top-right"></div>
          <div class="corner bottom-left"></div>
          <div class="corner bottom-right"></div>
        </div>
        <p class="scan-tip">模拟扫描模式 - 点击下方按钮模拟扫描结果</p>
        
        <!-- 模拟扫描按钮 -->
        <div class="mock-buttons">
          <van-button 
            type="primary" 
            @click="mockScan('PROJECT_001')"
            class="mock-btn"
          >
            模拟扫描项目001
          </van-button>
          <van-button 
            type="success" 
            @click="mockScan('TASK_002')"
            class="mock-btn"
          >
            模拟扫描任务002
          </van-button>
          <van-button 
            type="warning" 
            @click="mockScan('COMPLETE_003')"
            class="mock-btn"
          >
            模拟扫描完工003
          </van-button>
        </div>
      </div>
    </div>

    <!-- 扫描结果 -->
    <van-dialog
      v-model:show="showResult"
      title="扫描结果"
      :message="scanResult"
      show-cancel-button
      confirm-button-text="确定"
      cancel-button-text="重新扫描"
      @confirm="onConfirmResult"
      @cancel="startScan"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showSuccessToast, showFailToast } from 'vant'

const emit = defineEmits(['scanComplete'])

const isScanning = ref(false)
const showResult = ref(false)
const scanResult = ref('')

// 开始扫描
const startScan = () => {
  isScanning.value = true
}

// 停止扫描
const stopScan = () => {
  isScanning.value = false
}

// 模拟扫描
const mockScan = (result) => {
  scanResult.value = result
  showResult.value = true
  showSuccessToast('模拟扫描成功')
  isScanning.value = false
}

// 确认扫描结果
const onConfirmResult = () => {
  emit('scanComplete', scanResult.value)
  showResult.value = false
  scanResult.value = ''
}

// 暴露方法给父组件
defineExpose({
  startScan
})
</script>

<style lang="scss" scoped>
.simple-qr-scanner {
  position: relative;
}

.scanner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.scanner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  
  h3 {
    color: white;
    margin: 0;
    font-size: 18px;
  }
}

.close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
}

.scanner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--spacing-lg);
}

.scanner-frame {
  width: 250px;
  height: 250px;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  margin-bottom: var(--spacing-lg);
}

.corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid #4A90E2;
  
  &.top-left {
    top: -3px;
    left: -3px;
    border-right: none;
    border-bottom: none;
    border-top-left-radius: 8px;
  }
  
  &.top-right {
    top: -3px;
    right: -3px;
    border-left: none;
    border-bottom: none;
    border-top-right-radius: 8px;
  }
  
  &.bottom-left {
    bottom: -3px;
    left: -3px;
    border-right: none;
    border-top: none;
    border-bottom-left-radius: 8px;
  }
  
  &.bottom-right {
    bottom: -3px;
    right: -3px;
    border-left: none;
    border-top: none;
    border-bottom-right-radius: 8px;
  }
}

.scan-tip {
  color: white;
  text-align: center;
  font-size: 16px;
  margin: 0 0 var(--spacing-lg) 0;
}

.mock-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
  max-width: 300px;
}

.mock-btn {
  width: 100%;
  height: 50px;
  font-size: 16px;
}

// 平板适配
@media screen and (min-width: 768px) {
  .scanner-frame {
    width: 350px;
    height: 350px;
  }
  
  .corner {
    width: 40px;
    height: 40px;
    border-width: 4px;
  }
  
  .mock-buttons {
    max-width: 400px;
  }
  
  .mock-btn {
    height: 60px;
    font-size: 18px;
  }
}
</style>
